<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box" v-if="datas.preview_color">
      <div class="header" v-if="datas.style_align == 'left' && datas.choose_style == 'one'">
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info">
            <div class="user-name name-one">
              <span class="name-a nickname">{{ nickname }}</span>
              <span class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }} </span>
            </div>
            <div class="name_invite invite_text_color">
              <input type="hidden" v-model="this.inviteCode" />
              邀请码：{{ inviteCode }}
              <button class="copybtn">
                复制
              </button>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity"> xxxx 到期</p>
          </div>
          <div class="member-box" style="z-index:2;" v-if="datas.show_grade">
            <i class="iconfont icon-member-enter"></i>
            <div class="font">{{ level_name }}</div>
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <div class="header" v-if="datas.style_align == 'right' && datas.choose_style == 'one'">
        <div class="header-info">
          <div class="user-info">
            <div class="user-name name-one">
              <span class="name-a nickname">{{ nickname }}</span>
              <span class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }} </span>
            </div>
            <div class="name_invite invite_text_color">
              <input type="hidden" v-model="this.inviteCode" />
              邀请码：{{ inviteCode }}
              <button class="copybtn">
                复制
              </button>
              <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
            </div>
          </div>
          <div class="left" style="margin-right: 28%;">
            <img :src="emptyImage"/>
          </div>
          <div class="member-box" style="z-index:2;" v-if="datas.show_grade">
            <i class="iconfont icon-member-enter"></i>
            <div class="font">{{ level_name }}</div>
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <div class="header" v-if="datas.style_align == 'center' && datas.choose_style == 'one'">
        <div class="header-info_center">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info" style="margin-left: 0">
            <div class="user-name name-one">
              <span class="name-a nickname">{{ nickname }}</span>
              <span class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }} </span>
            </div>
            <div class="name_invite invite_text_color">
              <input type="hidden" v-model="this.inviteCode" />
              邀请码：{{ inviteCode }}
              <button class="copybtn">
                复制
              </button>
              <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
            </div>
          </div>
          <div class="member-box" style="z-index:2;" v-if="datas.show_grade">
            <i class="iconfont icon-member-enter"></i>
            <div class="font">{{ level_name }}</div>
            <i class="fa fa-angle-right"></i>
          </div>
        </div>
      </div>

      <div class="header-two-left" v-if="datas.style_align == 'left' && datas.choose_style == 'two'">
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
            </div>
            <div class="name_invite">
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="member-box"  v-if="datas.show_grade">
            <div class="box">
              <i class="iconfont icon-member-enter"></i>
              <div class="level">会员等级</div>
              <div class="member_btn">
                <span>点击查看</span>
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header-two-center" v-if="datas.style_align == 'center' && datas.choose_style == 'two'">
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-name">
            <div class="name-a nickname">{{ nickname }}</div>
            <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
          </div>
          <div class="name_invite">
            <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
            <div class="copybtn">复制</div>
          </div>
          <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          <div class="member-box" v-if="datas.show_grade">
            <div class="box">
              <i class="iconfont icon-member-enter"></i>
              <div class="level">会员等级</div>
              <div class="member_btn">
                <span>点击查看</span>
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header-two-right" v-if="datas.style_align == 'right' && datas.choose_style == 'two'">
        <div class="header-info">
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
            </div>
            <div class="name_invite">
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="member-box" v-if="datas.show_grade">
            <div class="box">
              <i class="iconfont icon-member-enter"></i>
              <div class="level">会员等级</div>
              <div class="member_btn">
                <span>点击查看</span>
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header-three-left" v-if="datas.style_align == 'left' && datas.choose_style == 'three'">
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
            </div>
            <div class="name_invite">
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="member-box" style="position: absolute;right: 0;bottom: 0" v-if="datas.show_grade">
            <div class="box">
              <div class="level">
                <i class="iconfont icon-member-enter"></i>
                会员等级
              </div>
              <div class="member_btn">
                点击查看
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="header-three-center"
        v-if="datas.style_align == 'center' && datas.choose_style == 'three'"
      >
        <div class="header-info">
          <div class="left">
            <div class="left-a">
              <img :src="emptyImage"/>
            </div>
          </div>
          <div style="width: 90px"></div>
          <div class="user-info" :style="{flex: datas.show_grade?'1':'',marginLeft: datas.show_grade?'15px':'30px'}">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
            </div>
            <div class="name_invite">
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="member-box" v-if="datas.show_grade">
            <div class="box">
              <div class="level">
                <i class="iconfont icon-member-enter"></i>
                会员等级
              </div>
              <div class="member_btn">
                点击查看
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="header-three-right"
        v-if="datas.style_align == 'right' && datas.choose_style == 'three'"
      >
        <div class="header-info">
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b id_text_color" v-if="datas.show_ID">ID:{{ uid }}</div>
            </div>
            <div class="name_invite">
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="left" style="margin-right: 85px">
            <img :src="emptyImage"/>
          </div>
          <div class="member-box" style="position: absolute;right: 0;bottom: 0" v-if="datas.show_grade">
            <div class="box">
              <div class="level">
                <i class="iconfont icon-member-enter"></i>
                会员等级
              </div>
              <div class="member_btn">
                点击查看
                <i class="iconfont icon-member_look"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="header-four-left"
        v-if="datas.style_align == 'left' && datas.choose_style == 'four'"
      >
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b" v-if="datas.show_grade">
                <div class="name-b0">
                  <div class="name-b-a">
                    <i class="iconfont icon-member-enter"></i>
                  </div>
                </div>
                <div class="name-b-b">会员等级</div>
              </div>
            </div>
            <div class="name_invite">
              <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
        </div>
      </div>

      <div
        class="header-four-center"
        v-if="datas.style_align == 'center' && datas.choose_style == 'four'"
      >
        <div class="header-info">
          <div class="left" :style="{ marginBottom: datas.show_grade?'':'8px'}">
            <img :src="emptyImage"/>
          </div>
          <div class="user-level" v-if="datas.show_grade">
            <div class="name-b">
              <div class="name-b0">
                <div class="name-b-a">
                  <i class="iconfont icon-member-enter"></i>
                </div>
              </div>
              <div class="name-b-b">会员等级</div>
            </div>
          </div>
          <div class="user-name nickname">{{ nickname }}</div>
          <div class="name_invite">
            <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
            <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
            <div class="copybtn">复制</div>
          </div>
          <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
        </div>
      </div>

      <div
        class="header-four-right"
        v-if="datas.style_align == 'right' && datas.choose_style == 'four'"
      >
        <div class="header-info">
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b" v-if="datas.show_grade">
                <div class="name-b0">
                  <div class="name-b-a">
                    <i class="iconfont icon-member-enter"></i>
                  </div>
                </div>
                <div class="name-b-b">会员等级</div>
              </div>
            </div>
            <div class="name_invite">
              <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="left">
            <img :src="emptyImage"/>
          </div>
        </div>
      </div>

      <div
        class="header-five-left"
        v-if="datas.style_align == 'left' && datas.choose_style == 'five'"
      >
        <div class="header-info">
          <div class="left">
            <img :src="emptyImage"/>
          </div>
          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b" v-if="datas.show_grade">
                <i class="iconfont icon-member-enter"></i>
                会员等级
              </div>
            </div>
            <div class="name_invite">
              <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
        </div>
      </div>

      <div
        class="header-five-center"
        v-if="datas.style_align == 'center' && datas.choose_style == 'five'"
      >
        <div class="header-info">
          <div class="left" :style="{ marginBottom: datas.show_grade?'':'8px'}">
            <img :src="emptyImage"/>
          </div>
          <div class="user-level" v-if="datas.show_grade">
            <div class="name-b">
               <i class="iconfont icon-member-enter"></i>
               会员等级
            </div>
          </div>
          <div class="user-name nickname">{{ nickname }}</div>
          <div class="name_invite">
            <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
            <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
            <div class="copybtn">复制</div>
          </div>
          <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
        </div>
      </div>

      <div
        class="header-five-right"
        v-if="datas.style_align == 'right' && datas.choose_style == 'five'"
      >
        <div class="header-info">

          <div class="user-info">
            <div class="user-name">
              <div class="name-a nickname">{{ nickname }}</div>
              <div class="name-b" v-if="datas.show_grade">
                <i class="iconfont icon-member-enter"></i>
                会员等级
              </div>
            </div>
            <div class="name_invite">
              <div class="name-c id_text_color" v-if="datas.show_ID">ID：{{ inviteCode }}</div>
              <div class="name-a invite_text_color">邀请码：{{ inviteCode }}</div>
              <div class="copybtn">复制</div>
            </div>
            <p class="validity_day_text" v-show="datas.show_validity">xxxx 到期</p>
          </div>
          <div class="left">
            <img :src="emptyImage"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emptyImage from "@/resource/images/image.png";
// 自定义样式
const css = function() {
	if(this.datas.preview_color) {
		const {
			preview_color,
			text_color,
			id_text_color,
			invite_text_color,
      validity_day_color
		} = this.datas;

		return `
      .component-${this.id} .html-box {
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2? preview_color.image: ''});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
      }

      .component-${this.id} .nickname {
          color: ${text_color};
      }

      .component-${this.id} .id_text_color {
          color: ${id_text_color || '#333'}!important;
      }

      .component-${this.id} .invite_text_color {
          color: ${invite_text_color || '#333'}!important;
      }

      .component-${this.id} .validity_day_text {
          color: ${validity_day_color || '#333'}!important;
      }
      
  `;
  }
};

export default {
  props: ["id", "datas", "styles"],
  data() {
    return {
	    emptyImage,
      nickname: "昵称",
      uid: "666",
      inviteCode: "888888",
      level_name: "普通会员",
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 默认
.component-wrapper {
  width: 375px;
}

.html-box {
  min-height: 30px;
  .copybtn {
    font-size: 12px;
    color: #666666;
    background-color: #f5f5f5;
    border: solid 1px #ebebeb;
    border-radius: 32px;
    margin-left: 8px;
    padding: 0 12px;
    height: 26px;
    line-height: 22px;
  }
}
.header {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .icon {
    text-align: right;
    position: relative;
    i {
      font-size: 20px;
      color: #fff;
    }
  }
  .header-info {
    display: flex;
    position: relative;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      /*border: solid 2px #ebebeb;*/
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .user-info {
      flex: 1;
      margin-left: 10px;
      text-align: left;
      color: #333;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name-one {
        line-height: 30px;
        color: #333;
        display: flex;
        align-items: center;
      }
      .name-a {
        font-size: 16px;
        font-weight: 600;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .name-b {
        background: #f5f5f5;
        border-radius: 25px;
        margin-left: 10px;
        padding: 0px 10px;
        height: 28px;
        line-height: 27px;
        color: #333;
      }
      .name_invite {
        font-size: 13px;
        line-height: 30px;
        /*margin-top: 10px;*/
      }
      .user-name {
        color: #333333;
        line-height: 28px;
      }
      .user-other {
        color: #8c8c8c;
        line-height: 28px;
      }
    }
    .member-box {
      align-content: center;
      background: linear-gradient(to right, #3b3b4f, #9898a4);
      border-radius: 60px;
      display: flex;
      position: absolute;
      right: 0;
      color: #fff;
      padding: 0 6px;
      margin-top: 17px;
      .font {
        font-size: 12px;
        right: 14px;
        line-height: 30px;
      }
      .iconfont {
        font-size: 20px;
        color: #fff;
        margin-right: 4px;
      }
      .fa {
        line-height: 30px;
        font-size: 16px;
        color: #fff;
        margin-left: 6px;
      }
      .img {
        width: 96px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        right: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .member-box {
      display: flex;
      align-content: center;
      position: absolute;
      right: 0;
      color: #fff;
      .font {
        font-size: 12px;
        right: 14px;
      }
      .iconfont {
        line-height: 30px;
        font-size: 20px;
      }
      .img {
        width: 96px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        right: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .header-info_center {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      /*border: solid 2px #ebebeb;*/
      overflow: hidden;
      margin-bottom: 10px;
      img {
        width: 100%;
      }
    }
    .user-info {
      margin-left: 10px;
      text-align: left;
      color: #333;
      .name-one {
        line-height: 30px;
        color: #333;
        display: flex;
        align-items: center;
      }
      .name-a {
        font-size: 16px;
        font-weight: 600;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .name-b {
        background: #f5f5f5;
        border-radius: 25px;
        margin-left: 10px;
        padding: 0px 10px;
        height: 28px;
        line-height: 27px;
        color: #333;
      }
      .name_invite {
        font-size: 13px;
        line-height: 30px;
      }
      .user-name {
        color: #333333;
        line-height: 18px;
        margin: 0 auto 10px auto;
        justify-content: center;
      }
      .user-other {
        color: #8c8c8c;
        line-height: 18px;
      }
    }
    .member-box {
      align-content: center;
      background: linear-gradient(to right, #3b3b4f, #9898a4);
      border-radius: 60px;
      display: flex;
      position: absolute;
      right: 0;
      color: #fff;
      padding: 0 6px;
      margin-top: 17px;
      .font {
        font-size: 12px;
        right: 14px;
        line-height: 30px;
      }
      .iconfont {
        font-size: 20px;
        color: #fff;
        margin-right: 4px;
      }
      .fa {
        line-height: 30px;
        font-size: 16px;
        color: #fff;
        margin-left: 6px;
      }
      .img {
        width: 96px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        right: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .member-box {
      display: flex;
      align-content: center;
      position: absolute;
      right: 0;
      color: #fff;
      .font {
        font-size: 12px;
        right: 14px;
      }
      .iconfont {
        line-height: 30px;
        font-size: 20px;
      }
      .img {
        width: 96px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        right: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.header-two-left {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          background: #f5f5f5;
          border-radius: 25px;
          padding: 0px 15px;
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          background: #fff;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 15px;
        }
      }
    }
    .member-box {
      margin-top: 5px;
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      overflow: hidden;
      .box {
        width: 98%;
        height: 40px;
        margin: 0 auto;
        padding: 0 10px;
        display: flex;
        border-radius: 8px;
        background: linear-gradient(to right, #3b3b4f, #9898a4);
        overflow: hidden;
        position: relative;
        color: #fff;
        .icon-member-enter {
          position: absolute;
          z-index: 0;
          top: -5px;
          left: -20px;
          font-size: 156px;
          color: #333;
          opacity: 0.4;
          transform: rotate(30deg);
          -webkit-transform: rotate(30deg);
          margin: 0 auto;
          height: 40px;
          line-height: 40px;
          border-radius: 8px 8px 0 0;
        }
        .level {
          flex: 1;
          z-index: 1;
          position: relative;
          line-height: 40px;
          font-size: 16px;
          font-weight: 600;
          color: #e6c785;
        }
        .member_btn {
          background: linear-gradient(to right, #f2e1aa, #e6c785);
          color: #3c3c50;
          height: 30px;
          line-height: 30px;
          padding: 0 16px;
          border-radius: 16px;
          font-size: 12px;
          margin: auto 0;
        }
      }
    }
  }
}
.header-two-center {
  height: auto;
  /*background-color: #fff;*/
  padding: 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 10px;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-name {
      display: flex;
      line-height: 28px;
      margin-bottom: 10px;
      .name-a {
        font-size: 16px;
        /*color: #333;*/
        font-weight: 600;
        margin-right: 10px;
      }
      .name-b {
        background: #f5f5f5;
        border-radius: 25px;
        padding: 0px 15px;
      }
    }
    .name_invite {
      display: flex;
      line-height: 28px;
      .name-a {
        color: #333;
        font-size: 13px;
      }
      .name-b {
        margin-left: 10px;
        background: #fff;
        border: 1px solid #f5f5f5;
        border-radius: 25px;
        padding: 0 15px;
      }
    }

    .member-box {
      margin-top: 5px;
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      overflow: hidden;
      .box {
        width: 98%;
        height: 40px;
        margin: 0 auto;
        padding: 0 10px;
        display: flex;
        border-radius: 8px;
        background: linear-gradient(to right, #3b3b4f, #9898a4);
        overflow: hidden;
        position: relative;
        color: #fff;
        .icon-member-enter {
          position: absolute;
          z-index: 0;
          top: -5px;
          left: -20px;
          font-size: 156px;
          color: #333;
          opacity: 0.4;
          transform: rotate(30deg);
          -webkit-transform: rotate(30deg);
          margin: 0 auto;
          height: 40px;
          line-height: 40px;
          border-radius: 8px 8px 0 0;
        }
        .level {
          flex: 1;
          z-index: 1;
          position: relative;
          line-height: 40px;
          font-size: 16px;
          font-weight: 600;
          color: #e6c785;
        }
        .member_btn {
          background: linear-gradient(to right, #f2e1aa, #e6c785);
          color: #3c3c50;
          height: 30px;
          line-height: 30px;
          padding: 0 16px;
          border-radius: 16px;
          font-size: 12px;
          margin: auto 0;
        }
      }
    }
  }
}
.header-two-right {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          background: #f5f5f5;
          border-radius: 25px;
          padding: 0px 15px;
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;

          background: #fff;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 15px;
        }
      }
    }
    .member-box {
      margin-top: 5px;
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      overflow: hidden;
      .box {
        width: 98%;
        height: 40px;
        margin: 0 auto;
        padding: 0 10px;
        display: flex;
        border-radius: 8px;
        background: linear-gradient(to right, #3b3b4f, #9898a4);
        overflow: hidden;
        position: relative;
        color: #fff;
        .icon-member-enter {
          position: absolute;
          z-index: 0;
          top: -5px;
          left: -20px;
          font-size: 156px;
          color: #333;
          opacity: 0.4;
          transform: rotate(30deg);
          -webkit-transform: rotate(30deg);
          margin: 0 auto;
          height: 40px;
          line-height: 40px;
          border-radius: 8px 8px 0 0;
        }
        .level {
          flex: 1;
          z-index: 1;
          position: relative;
          line-height: 40px;
          font-size: 16px;
          font-weight: 600;
          color: #e6c785;
        }
        .member_btn {
          background: linear-gradient(to right, #f2e1aa, #e6c785);
          color: #3c3c50;
          height: 30px;
          line-height: 30px;
          padding: 0 16px;
          border-radius: 16px;
          font-size: 12px;
          margin: auto 0;
        }
      }
    }
  }
}
.header-three-left {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        height: 32px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          background: #f5f5f5;
          border-radius: 25px;
          padding: 0px 15px;
          height:28px;
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        height: 32px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height:28px;
          background: #fff;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 15px;
        }
      }
    }
    .member-box {
      margin-top: 5px;
      width: 100px;
      box-sizing: border-box;
      overflow: hidden;
      .box {
        height: 74px;
        overflow: hidden;
        position: relative;
        border-radius: 6px;
        padding: 2px 8px;
        background-image: url("../../../resource/images/levelBg.png");
        background-repeat: no-repeat;
        background-position: -6px 0;
        .level {
          margin-top: 5px;
          margin-left: 16px;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          color: #e6c785;
          font-size: 12px;
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
        }
        .member_btn {
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
          color: #e6c785;

          font-size: 12px;
          border-radius: 16px;
          border: 1px solid #e6c785;
          margin-left: 10px;
          padding-left: 3px;
          i {
            font-size: 10px;
          }
        }
      }
    }
  }
}
.header-three-center {
  height: auto;
  /*background-color: #fff;*/
  padding-top: 20px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 100%;
      height: 64px;
      margin-bottom: 5px;
      .left-a {
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          /*border: solid 2px #ebebeb;*/
        }
      }
    }
    .user-info {
      /*flex: 1;*/
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      .user-name {
        display: flex;
        line-height: 28px;
        margin-bottom: 5px;
        justify-content: center;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          background: #f5f5f5;
          border-radius: 25px;
          padding: 0px 15px;
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        height: 32px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 28px;
          background: #fff;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 15px;
        }
      }
    }
    .member-box {
      margin-top: 5px;
      width: 100px;
      box-sizing: border-box;
      overflow: hidden;
      .box {
        height: 74px;
        overflow: hidden;
        position: relative;
        border-radius: 6px;
        padding: 2px 8px;
        background-image: url("../../../resource/images/levelBg.png");
        background-repeat: no-repeat;
        background-position: -6px 0;
        .level {
          margin-top: 5px;
          margin-left: 16px;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          color: #e6c785;
          font-size: 12px;
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
        }
        .member_btn {
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
          color: #e6c785;

          font-size: 12px;
          border-radius: 16px;
          border: 1px solid #e6c785;
          margin-left: 10px;
          padding-left: 3px;
          i {
            font-size: 10px;
          }
        }
      }
    }
  }
}
.header-three-right {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        height: 32px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          background: #f5f5f5;
          border-radius: 25px;
          padding: 0px 15px;
          height: 28px;
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        height: 32px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 28px;
          background: #fff;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 15px;
        }
      }
    }
    .member-box {
      margin-top: 5px;
      width: 100px;
      box-sizing: border-box;
      overflow: hidden;
      .box {
        height: 74px;
        overflow: hidden;
        position: relative;
        border-radius: 6px;
        padding: 2px 8px;
        background-image: url("../../../resource/images/levelBg.png");
        background-repeat: no-repeat;
        background-position: -6px 0;
        .level {
          margin-top: 5px;
          margin-left: 16px;
          display: flex;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          color: #e6c785;
          font-size: 12px;
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
        }
        .member_btn {
          transform: rotate(10deg);
          -webkit-transform: rotate(10deg);
          color: #e6c785;

          font-size: 12px;
          border-radius: 16px;
          border: 1px solid #e6c785;
          margin-left: 10px;
          padding-left: 3px;
          i {
            font-size: 10px;
          }
        }
      }
    }
  }
}
.header-four-left {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          border-radius: 25px;
          color: #fff;

          display: flex;
          .name-b0 {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #a77844;
            z-index: 1;
            .name-b-a {
              width: 28px;
              height: 28px;
              margin: 2px 0 0 2px;
              border-radius: 50%;
              border: 1px solid #fff;
              background: #a77844;
              text-align: center;
            }
          }

          .name-b-b {
            padding: 0 10px;
            margin-top: 4px;
            border-radius: 0 16px 16px 0;
            height: 24px;
            background: linear-gradient(
              to right,
              #a77844,
              #f2c691,
              #f2c691,
              #a77844
            );
            position: relative;
            left: -10px;
            z-index: 0;
          }
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 24px;
          line-height: 24px;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 5px;
          background: #c4c4c4;
        }
        .name-c {
          margin-right: 10px;
        }
      }
    }
  }
}
.header-four-center {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-level {
      position: relative;
      top: -15px;
      .name-b {
        border-radius: 25px;
        color: #fff;
        display: flex;
        .name-b0 {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background: #a77844;
          z-index: 1;
          .name-b-a {
            width: 28px;
            height: 28px;
            margin: 2px 0 0 2px;
            border-radius: 50%;
            border: 1px solid #fff;
            background: #a77844;
            text-align: center;
          }
        }

        .name-b-b {
          padding: 0 10px;
          margin-top: 4px;
          border-radius: 0 16px 16px 0;
          height: 24px;
          background: linear-gradient(
            to right,
            #a77844,
            #f2c691,
            #f2c691,
            #a77844
          );
          position: relative;
          left: -10px;
          z-index: 0;
        }
      }
    }

    .user-name {
      display: flex;
      line-height: 28px;
      font-size: 16px;
      /*color: #333;*/
      font-weight: 600;
      position: relative;
      top: -7.5px;
    }
    .name_invite {
      display: flex;
      line-height: 28px;
      .name-a {
        color: #333;
        font-size: 13px;
      }
      .name-b {
        margin-left: 10px;
        height: 24px;
        line-height: 24px;
        border: 1px solid #f5f5f5;
        border-radius: 25px;
        padding: 0 5px;
        background: #c4c4c4;
      }
      .name-c {
        margin-right: 10px;
      }
    }
  }
}
.header-four-right {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          border-radius: 25px;
          color: #fff;

          display: flex;
          .name-b0 {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #a77844;
            z-index: 1;
            .name-b-a {
              width: 28px;
              height: 28px;
              margin: 2px 0 0 2px;
              border-radius: 50%;
              border: 1px solid #fff;
              background: #a77844;
              text-align: center;
            }
          }

          .name-b-b {
            padding: 0 10px;
            margin-top: 4px;
            border-radius: 0 16px 16px 0;
            height: 24px;
            background: linear-gradient(
              to right,
              #a77844,
              #f2c691,
              #f2c691,
              #a77844
            );
            position: relative;
            left: -10px;
            z-index: 0;
          }
        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 24px;
          line-height: 24px;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 5px;
          background: #c4c4c4;
        }
        .name-c {
          margin-right: 10px;
        }
      }
    }
  }
}
.header-five-left {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          color: #fff;
          padding: 0 10px;
          margin-top: 4px;
          line-height: 24px;
          border-radius: 16px;
          height: 24px;
          background: linear-gradient(
            to right,
            #3f3e3d,
            #6e6d6c,
            #a8a4a4,
            #a8a4a4,
            #6e6d6c,
            #3f3e3d
          );

        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 24px;
          line-height: 24px;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 5px;
          background: #c4c4c4;
        }
        .name-c {
          margin-right: 10px;
        }
      }
    }
  }
}
.header-five-center {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-level {
      position: relative;
      top: -15px;
      .name-b {
        color: #fff;
        padding: 0 10px;
          margin-top: 4px;
          border-radius: 16px;
          height: 24px;
          background: linear-gradient(
            to right,
            #3f3e3d,
            #6e6d6c,
            #a8a4a4,
            #a8a4a4,
            #6e6d6c,
            #3f3e3d
          );
      }
    }

    .user-name {
      display: flex;
      line-height: 28px;
      font-size: 16px;
      /*color: #333;*/
      font-weight: 600;
      position: relative;
      top: -7.5px;
    }
    .name_invite {
      display: flex;
      line-height: 28px;
      .name-a {
        color: #333;
        font-size: 13px;
      }
      .name-b {
        margin-left: 10px;
        height: 24px;
        line-height: 24px;
        border: 1px solid #f5f5f5;
        border-radius: 25px;
        padding: 0 5px;
        background: #c4c4c4;
      }
      .name-c {
        margin-right: 10px;
      }
    }
  }
}
.header-five-right {
  height: auto;
  /*background-color: #fff;*/
  padding: 20px 10px;
  position: relative;
  color: #333;
  .header-info {
    display: flex;
    flex-wrap: wrap;
    .left {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        /*border: solid 2px #ebebeb;*/
      }
    }
    .user-info {
      flex: 1;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user-name {
        display: flex;
        line-height: 28px;
        .name-a {
          font-size: 16px;
          /*color: #333;*/
          font-weight: 600;
          margin-right: 10px;
        }
        .name-b {
          color: #fff;
          padding: 0 10px;
          margin-top: 4px;
          line-height: 24px;
          border-radius: 16px;
          height: 24px;

          background: linear-gradient(
            to right,
            #3f3e3d,
            #6e6d6c,
            #a8a4a4,
            #a8a4a4,
            #6e6d6c,
            #3f3e3d
          );

        }
      }
      .name_invite {
        display: flex;
        line-height: 28px;
        .name-a {
          color: #333;
          font-size: 13px;
        }
        .name-b {
          margin-left: 10px;
          height: 24px;
          line-height: 24px;
          border: 1px solid #f5f5f5;
          border-radius: 25px;
          padding: 0 5px;
          background: #c4c4c4;
        }
        .name-c {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
